<template>
	<view class="container">
<!-- 		<view class="sr_title">
			<view class="sr_title1">
				<view @tap="goBack">
					<image src="/static/img/zjt.png" mode="widthFix"></image>
					返回
				</view>
				<view>
					个人信息
				</view>
			</view>
		</view> -->
		<!-- <view style="width: 100%;height: 10vh;"></view> -->
		<view class="list">
			<view class="list1">
				<view>
					<image src="/static/img/bt.png" mode="widthFix"></image>
				</view>
				<view>真实姓名</view>
				<input :disabled="type==0 || type==3" style="width: 300rpx;" v-model="form.realName" placeholder="请输入真实姓名" />
				<uni-data-select :disabled="(type==0 || type==3)&&form.gender" v-model="form.gender" :localdata="range" :clear="false"></uni-data-select>
			</view>
			<view class="list1">
				<view>
					<image src="/static/img/bt.png" mode="widthFix"></image>
				</view>
				<view>联系电话</view>
				<input :disabled="type==3" type="number" v-model="form.mobile" placeholder="请输入联系电话" />
			</view>
			<view class="list1">
				<view>
					<image src="/static/img/bt.png" mode="widthFix"></image>
				</view>
				<view>真实头像</view>
				<view @tap="changeImg('avatar')">
					<text v-if="!form.avatar">请上传</text>
					<up-image v-else :src="`${ basUrl.baseURL }${form.avatar}`" shape="circle" width="32"
						height="32"></up-image>
					<image src="/static/img/yjt80.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list1">
				<view>
					<image src="/static/img/bt.png" mode="widthFix"></image>
				</view>
				<view>出生年月</view>
				<view  @tap="setDate('birthday')">
					<text >{{form.birthday?dayjs(form.birthday).format('YYYY-MM-DD'):'请选择'}}</text>
					<image src="/static/img/yjt80.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list1">
				<view>
					<image src="/static/img/bt.png" mode="widthFix"></image>
				</view>
				<view>从业时间</view>
				<view @tap="setDate('workAt')">
					<text>{{form.workAt?dayjs(form.workAt).format('YYYY-MM-DD'):'请选择'}}</text>
					<image src="/static/img/yjt80.png" mode="widthFix"></image>
				</view>
			</view>

			<view class="list3" style="margin-top: 5%;">
				<view>身份证号</view>
				<input :disabled="type==0 || type==3" v-model="form.idCard" placeholder="请输入身份证号" />
			</view>
			<view class="list4">
				<view class="list4_1">身份照片</view>
				<view class="list4_2">
					<view @click="changeImg('idFront')">
						<image v-if="form.idFront" :src="`${ basUrl.baseURL }${form.idFront}`" mode="widthFix"></image>
						<image v-else src="/static/persion/zheng.png" mode="widthFix"></image>
						<image src="/static/persion/xj.png" mode="widthFix"></image>
					</view>
					<view @click="changeImg('idBack')">
						<image v-if="form.idBack" :src="`${ basUrl.baseURL }${form.idBack}`" mode="widthFix"></image>
						<image v-else src="/static/persion/fan.png" mode="widthFix"></image>
						<image src="/static/persion/xj.png" mode="widthFix"></image>
					</view>
				</view>
			</view>


			<view class="list2" style="margin-top: 5%;">
				<view>毕业证书</view>
				<view @click="changeImg('diploma')">
					<up-image v-if="form.diploma" :src="`${ basUrl.baseURL }${form.diploma}`" mode="aspectFill"
						width="60rpx" height="60rpx"></up-image>
					<text v-else>请上传</text>
					<image src="/static/img/yjt80.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list2">
				<view>从业证书</view>
				<view @click="changeImg('certificate')">
					<up-image v-if="form.certificate" :src="`${ basUrl.baseURL }${form.certificate}`" mode="aspectFill"
						width="60rpx" height="60rpx"></up-image>
					<text v-else>请上传</text>
					<image src="/static/img/yjt80.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list2">
				<view>其它证书</view>
				<view @click="changeImg('certificateOther')">
					<up-image v-if="form.certificateOther" :src="`${ basUrl.baseURL }${form.certificateOther}`"
						mode="aspectFill" width="60rpx" height="60rpx"></up-image>
					<text v-else>请上传</text>
					<image src="/static/img/yjt80.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list2">
				<view>常住地址</view>
				<view>
					<input :disabled="type==3" style="width: 550rpx;" v-model="form.address" placeholder="请输入常住地址" />	
					<!-- <text>请选择</text>
					<image src="/static/img/yjt80.png" mode="widthFix"></image> -->
				</view>
			</view>
		</view>

		<view v-if="type==1 || type==2" class="btnSty">
			<up-button type="success" :loading="loading" text="提交" @click="save"></up-button>
		</view>
		<view v-if="type==3" class="btnSty" style="text-align: center;background-color: rgb(233,50,20);">
			审核中
		</view>
		<view v-if="type==0" class="btnSty">
			<up-button type="success" :loading="loading" text="保存" @click="save"></up-button>
		</view>
	</view>
	<view class="footer" style="height: 50rpx;line-height: 50rpx;"></view>
	<up-datetime-picker ref="datetimePickerRef" :title="title" :show="show" mode="date" :formatter="formatter"
		@cancel="show=false" @confirm="getDate"></up-datetime-picker>
</template>
<script>
	import {
		userInfoSave,
		serverDetailApi,
	} from '@/api/service.js'
	import {
		getUserInfoApi,
	} from '@/api/user.js'
	import basUrl from "@/config/config.js"
	import {
		Upload
	} from "@/utils/upload.js"
	import dayjs from "dayjs"
	import {
		onLoad,
		onUnload,
		onReady
	} from "@dcloudio/uni-app"

	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	import {
		useStore
	} from '@/store/index.js'
	export default {

		setup() {
			const store = useStore()
			const datetimePickerRef = ref(null);
			const state = reactive({
				userInfo: computed(() => store.userInfo),
				show: false,
				loading: false,
				dateType: '',
				title: '',
				range: [{
						value: 0,
						text: '女'
					},
					{
						value: 1,
						text: '男'
					}
				],

				form: {
					address: "",
					advantage: "",
					avatar: "",
					birthday: "",
					certificate: "",
					certificateOther: "",
					diploma: "",
					gender: null,
					id: null,
					idBack: "",
					idCard: "",
					idFront: "",
					images: "",
					labels: "",
					latitude: 0,
					longitude: 0,
					margin: 0,
					marginAt: "",
					marginStatus: 0,
					mobile: "",
					status: 0,
					realName: "",
				},
				type:"",
			})
			onLoad((option) => {
				state.type=option.type || 0;
				if(option.type==1)//申请
					getUserInfo();
				else if(option.type==2)//驳回
					getData();
				else if(option.type==3)//申请中
					getData();
				else
					getData();//成功
			})

			const formatter = (type, value) => {
				if (type === 'year') {
					return `${value}年`;
				}
				if (type === 'month') {
					return `${value}月`;
				}
				if (type === 'day') {
					return `${value}日`;
				}
				return value;
			}
			onReady(() => {
				// 微信小程序需要用此写法
				datetimePickerRef.value.setFormatter(formatter);
			})
			// 获取人个信息
			const getData = async () => {
				const {
					data
				} = await serverDetailApi(store.userInfo.id)
				data.realName = data.userName;
				state.form = data

			}
			const getUserInfo = async () => {
				state.form = state.userInfo
				// getUserInfoApi().then(res=>{
				// 	console.log(state.userInfo);
				// });
				// state.form = data

			}
			const goBack = () => {
				uni.navigateBack(-1)
			}
			const previewImage = (urls) => {
				uni.previewImage({
					urls: [urls]
				})
			}

			//选择图片
			const changeImg = (key) => {
				if(state.type==3)return;
				// 从相册选择9张图
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						Upload(res.tempFilePaths[0]).then((r) => {

							state.form[key] = r
						})
					}
				})
			}


			const save = async () => {
				if (!state.form.realName) {
					uni.$u.toast("请输入真实姓名");
					return false;
				}
				if (state.form.gender != 0 && !state.form.gender) {
					uni.$u.toast("请选择性别");
					return false;
				}
				state.form.mobile = state.form.mobile.replace(/\s/g, "");
				if (!uni.$u.test.mobile(state.form.mobile)) {
					uni.$u.toast("手机号格式有误");
					return false;
				}
				if (!state.form.avatar) {
					uni.$u.toast("请上传头像");
					return false;
				}
				if (!state.form.birthday) {
					uni.$u.toast("请选择出生日期");
					return false;
				}
				if (!state.form.workAt) {
					uni.$u.toast("请选择从业时间");
					return false;
				}
				state.loading = true
				state.form.userName = state.form.realName;
				let data = {
					...state.form
				}
				try {
					await userInfoSave(data)
					state.loading = false
					uni.redirectTo({
						url: '/pages/components/success' // 新页面路径
					})
				} catch {
					state.loading = false
				}

			}
			// 获取日期
			const getDate = (e) => {
				state.show = false

				const timeFormat = uni.$u.timeFormat;
				if (state.dateType === "workAt") {
					state.form.workAt = timeFormat(e.value, 'yyyy-mm-dd 00:00:00');
				} else {
					state.form.birthday = timeFormat(e.value, 'yyyy-mm-dd  00:00:00');
				}
				state.dateType = ""
				state.title = ""

			}
			// 选择日期
			const setDate = (type) => {
				if(state.type==3)return;
				// type
				state.dateType = type
				if (type === "workAt") {
					state.title = "从业时间"
				} else {
					state.title = "出生年月"
				}
				state.show = true
			}
			return {
				...toRefs(state),
				save,
				basUrl,
				previewImage,
				datetimePickerRef,
				formatter,
				dayjs,
				getDate,
				setDate,
				getData,
				changeImg,
				goBack,
				getUserInfo,
			}
		}

	}
</script>
<style>
	page {
		background-color: #EFEFEF;
		font-size: 32rpx;
	}
</style>
<style scoped lang="scss">
	.container {
		min-height: 100vh;
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
		padding-bottom: calc(140rpx + constant(safe-area-inset-bottom));
	}

	.sr_title {
		width: 100%;
		height: 10vh;
		background-color: #38393E;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;

		.sr_title1 {
			width: 100%;
			height: 40%;
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;

			view:nth-child(1) {
				width: 40%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				image {
					width: 12%;
					height: 100%;
					margin: 0 5%;
				}
			}

			view:nth-child(2) {
				width: 60%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
		}
	}

	.list {
		width: 100%;

		.list1 {
			width: 100%;
			height: 6vh;
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 2rpx solid #eaeaea;
			position: relative;

			view:nth-child(1) {
				width: 60rpx;
				height: 100%;
				display: flex;
				align-items: flex-start;
				justify-content: flex-end;

				image {
					width: 50%;
					height: 100%;
					margin: 30% 0;
				}
			}

			view:nth-child(2) {
				width: 200rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}

			input {
				width: 70%;
				height: 100%;
				z-index: 1;
			}

			view:nth-child(3) {
				width: 200rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-left: 35%;
				padding-right: 20rpx;
				color: #808080;
				font-size: 28rpx;

				image {
					width: 20%;
					height: 100%;
				}
			}

			uni-data-select {
				position: absolute;
				top: 15%;
				right: 20px;
				width: 130rpx;
				z-index: 2;

				:deep(.uni-select) {
					border: 2rpx solid #06BF4E;
				}

				:deep(.uni-select__input-text) {
					color: #06BF4E;
				}

				:deep(.uni-icons) {
					color: #06BF4E !important;
				}
			}
		}

		.list2 {
			width: 100%;
			height: 6vh;
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #eaeaea;

			view:nth-child(1) {
				width: 200rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			view:nth-child(2) {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				color: #808080;
				font-size: 28rpx;

				image {
					width: 40rpx;
					margin-right: 20rpx;
				}
			}
		}

		.list3 {
			width: 100%;
			height: 6vh;
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 2rpx solid #eaeaea;


			view:nth-child(1) {
				width: 35%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			input {
				width: 65%;
				height: 100%;
			}
		}

		.list4 {
			width: 100%;
			background-color: white;
			border-bottom: 2rpx solid #eaeaea;


			.list4_1 {
				width: 35%;
				height: 6vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.list4_2 {
				width: 100%;
				height: 15vh;
				display: flex;
				align-items: flex-start;
				justify-content: space-evenly;

				view {
					width: 40%;
					height: 80%;
					border: 2rpx dashed #808080;
					border-radius: 15rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;

					image:nth-child(1) {
						width: 70%;
						height: 100%;
					}

					image:nth-child(2) {
						width: 10%;
						height: 100%;
						position: absolute;
						top: 2%;
						right: 2%;
					}
				}
			}
		}
	}

	.btnSty {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;


		background: #fff;
		padding: 20rpx 20rpx 0 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));

		button {
			background-color: #06C04F;
			width: 100%;
			height: 100rpx;
			color: white;
			font-size: 35rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>